<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- 样式 -->
<style>
    /* 模态框样式 */
    .modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        margin: 10% auto;
        padding: 20px;
        width: 300px;
        text-align: center;
        border-radius: 8px;
    }

    .close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    #qrcode-container img {
        width: 100%;
        height: auto;
    }
</style>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="index.html" class="top-contact__logo">
                    <img src="assets/picture/logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="54223d273126243120143339353d387a373b39">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->
<nav class="category-two">
    <span class="close-sidebar"><i class="las la-times"></i></span>
    <ul class="category-menu-two">
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/dog01.png" alt=""></span> Dog Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/cat.png" alt=""></span> Cat </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"> <span class="category-menu-two__thumb"><img src="assets/picture/fish.png" alt=""></span> Fish </a>
        </li>
        <li class="category-menu-two__item">                 
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/toys.png" alt=""></span> Pet toy </a>
        </li>
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/parrot.png" alt=""></span> Parrot Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/rabbit.png" alt=""></span> Rabbit </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet </a>
        </li>
     </ul>
     <div class="contact-list__wrapper d-md-none d-block">
        <div class="contact-list">
             <span class="contact-list__icon">
                <img src="assets/picture/phone.png" alt="">
             </span>
             <span class="contact-list__info"> 000 - 8888 - 9999</span>
        </div>
        <div class="contact-list">
             <span class="contact-list__icon">
               <img src="assets/picture/email.png" alt="">
            </span>
             <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="d9afb0aabcaba9bcad99beb4b8b0b5f7bab6b4">[email&#160;protected]</a></span>
        </div>
     </div>
</nav>

<!-- ==================== Bottom Header End Here ==================== -->
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>
            <div class="header-category-two">
                <button class="header-category-two__item">Categories <span class="header-category-two__icon"><i class="las la-bars"></i></span></button>
               
            </div>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu me-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                         <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index-two.html"> Home Two </a></li>
                         </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product category</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-two-details.html">Product Details</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href=""> Check Out</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="faq.html"> Faq </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="javascript:;"> Error page </a></li>
                      </ul>
                      </li> 
                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a>
                          </li>
                        </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                    <li class=" nav-item">
                      <div class="toggle-search-box d-none d-lg-block">
                          <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="header-info">
                <div class="toggle-search-box d-lg-none d-block">
                    <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__wishlist">
                 <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
              </div>
              <div class="header-info__cart">
                     <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                 <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
              </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->
  
   <!--========================== Search Modal Start ==========================-->
   <div class="overlay-search-box position-relative">
    <div class="modal fade" id="search-box" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="search-overlay-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="search-box">
                                    <div class="input--group">
                                        <input type="text" class="form--control style-two" placeholder="Search....">
                                        <button class="search-btn" type="submit"><i class="las la-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!--========================== Search Modal End ==========================-->

<!-- ==================== Breadcumb Start Here ==================== -->
<section class="breadcumb py-120 bg-img" style="background-image: url(../static/assets/picture/breadcumb-img.png);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="breadcumb__wrapper">
                    <h1 class="breadcumb__title"> 结算</h1>
                    <ul class="breadcumb__list">
                        <li class="breadcumb__item"><a href="index.html" class="breadcumb__link"> <i class="las la-home"></i> Home</a> </li>
                        <li class="breadcumb__item"> / </li>
                        <li class="breadcumb__item"> <span class="breadcumb__item-text"> 结算  </span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Breadcumb End Here ==================== -->

<!-- =================check out section start here ===================-->

<div class="checkout-section py-120">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-8">
                <div class="billing-details">
                    <h5 class="billing-details__title">账单详情</h5>
                    <div class="row">
                        <!-- 省份 -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="province" class="form--label">Province<span class="required">*</span></label>
                                <input type="text" class="form--control" id="province" name="province"
                                       th:value="${UPLOAD_Address?.province != null} ? ${UPLOAD_Address.province} : ''" required>
                            </div>
                        </div>

                        <!-- 城市 -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="city" class="form--label">City<span class="required">*</span></label>
                                <input type="text" class="form--control" id="city" name="city"
                                       th:value="${UPLOAD_Address?.city != null} ? ${UPLOAD_Address.city} : ''" required>
                            </div>
                        </div>

                        <!-- 区域 -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="area" class="form--label">Area<span class="required">*</span></label>
                                <input type="text" class="form--control" id="area" name="area"
                                       th:value="${UPLOAD_Address?.area != null} ? ${UPLOAD_Address.area} : ''" required>
                            </div>
                        </div>

                        <!-- 详细地址 -->
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="address" class="form--label">Address<span class="required">*</span></label>
                                <input type="text" class="form--control" id="address" name="address"
                                       th:value="${UPLOAD_Address?.address != null} ? ${UPLOAD_Address.address} : ''"
                                       placeholder="House number and street name" required>
                            </div>
                        </div>

                        <!-- 联系电话 -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="tel" class="form--label">Phone Number<span class="required">*</span></label>
                                <input type="tel" class="form--control" id="tel" name="tel"
                                       th:value="${UPLOAD_Address?.tel != null} ? ${UPLOAD_Address.tel} : ''" required>
                            </div>
                        </div>

                        <!-- 收货人姓名 -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="name" class="form--label">Recipient Name<span class="required">*</span></label>
                                <input type="text" class="form--control" id="name" name="name"
                                       th:value="${UPLOAD_Address?.name != null} ? ${UPLOAD_Address.name} : ''" required>
                            </div>
                        </div>

                        <!-- 是否默认地址 -->
                        <div class="col-lg-6">
                            <div class="form-group form--check">
                                <input class="form-check-input" type="checkbox" id="isdefault" name="isdefault"
                                       th:checked="${UPLOAD_Address?.isdefault == 1}">
                                <label class="form-check-label" for="isdefault">
                                    Set as default address
                                </label>
                            </div>
                        </div>

                        <!-- 订单备注 -->
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="ordernote" class="form--label">Order Notes (optional)</label>
                                <textarea class="form--control" id="ordernote" name="ordernote" rows="3"
                                          placeholder="Type your note"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="your-order">
                    <h6 class="your-order__title">你的订单</h6>
                    <div th:each="orderinfo : ${orderinfos}" class="order d-flex justify-content-between align-items-center">
                        <ul class="order-title">
                            <li class="order-title__one" th:text="${orderinfo.getProductname()}">Product Name</li>
                            <li class="order-title__one" th:text="'X ' + ${orderinfo.getNumber()}">Quantity</li>
                        </ul>
                        <!-- 计算并显示每个订单项的小计 -->
                        <span class="order__number subtotal-value" th:text="'$' + ${#numbers.formatDecimal(orderinfo.price * orderinfo.number, 1, 2)}">$0.00</span>
                    </div>

                    <!-- 显示 Subtotal -->
                    <div class="order d-flex justify-content-between align-items-center">
                        <ul class="order-title">
                            <li class="order-title__one">Subtotal</li>
                        </ul>
                        <span class="order__number" id="subtotal">$0.00</span>
                    </div>

                    <!-- 显示 Total -->
                    <div class="order d-flex justify-content-between align-items-center">
                        <ul class="order-title">
                            <li class="order-title__one">Total</li>
                        </ul>
                        <span class="order__number" id="total">$0.00</span>
                    </div>

                    <!-- 支付方式 -->
                    <div class="order-system">
                        <div class="form--radio mb-2">
                            <input class="form-check-input" type="radio" name="paymentMethod" id="transfer" value="wechat" checked>
                            <label class="form-check-label" for="transfer">微信付款</label>
                        </div>
                        <div class="form--radio mb-2">
                            <input class="form-check-input" type="radio" name="paymentMethod" id="payments" value="alipay">
                            <label class="form-check-label" for="payments">支付宝付款</label>
                        </div>
                        <div class="form--radio">
                            <input class="form-check-input" type="radio" name="paymentMethod" id="delivery" value="creditcard">
                            <label class="form-check-label" for="delivery">信用卡付款</label>
                        </div>
                    </div>

                    <!-- 隐私政策和条款 -->
                    <p class="your-order__desc">
                        你的个人信息将被用来处理你的订单，在整个网站中为您的体验提供支持，中所述的其他目的
                    </p>
                    <a href="index.html" class="your-order__desc-link"> 隐私政策.</a>
                    <div class="form--check">
                        <input class="form-check-input" type="checkbox" value="" id="condition" checked>
                        <label class="form-check-label" for="condition">
                            我已阅读并同意本网站的 <a href="index.html" class="order-system__link"> 条款和条件 </a>
                        </label>
                    </div>

                    <!-- 立刻下单按钮 -->
                    <div class="place-order">
                        <button id="place-order-btn" class="btn btn--base pill">立刻下单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 二维码弹窗 -->
<div id="qrcode-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>请扫描二维码完成支付</h2>
        <div id="qrcode-container"></div>
    </div>
</div>




<!-- =================checkout section end here===================== -->
<script>
    // 在页面加载完成后执行
    document.addEventListener("DOMContentLoaded", function () {
        // 获取所有小计值
        const subtotalElements = document.querySelectorAll(".subtotal-value");
        let total = 0;

        // 遍历每个小计值
        subtotalElements.forEach(function (element) {
            // 获取小计值的文本内容（例如 "$200.00"）
            const subtotalText = element.textContent;

            // 去掉 "$" 符号，并转换为数字
            const subtotalValue = parseFloat(subtotalText.replace("$", ""));

            // 累加到总价
            total += subtotalValue;
        });

        // 格式化总价为两位小数
        const formattedTotal = "$" + total.toFixed(2);

        // 更新 Subtotal 和 Total 的显示
        document.getElementById("subtotal").textContent = formattedTotal;
        document.getElementById("total").textContent = formattedTotal;
    });
</script>



<script>
    document.addEventListener("DOMContentLoaded", function () {
        const placeOrderBtn = document.getElementById("place-order-btn");
        let paymentStatusInterval; // 用于存储轮询的定时器
        let isPaid = false; // 标记是否已支付

        placeOrderBtn.addEventListener("click", function () {
            const billingDetails = {
                province: document.getElementById("province").value,
                city: document.getElementById("city").value,
                area: document.getElementById("area").value,
                address: document.getElementById("address").value,
                tel: document.getElementById("tel").value,
                name: document.getElementById("name").value,
                ordernote: document.getElementById("ordernote").value,
            };

            // 确保必填信息不为空
            if (
                billingDetails.province === "" ||
                billingDetails.city === "" ||
                billingDetails.area === "" ||
                billingDetails.address === "" ||
                billingDetails.tel === "" ||
                billingDetails.name === ""
            ) {
                alert("请填写必填信息");
                return;
            }

            // 发送下单请求
            fetch("/place-order", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(billingDetails)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        // 显示模态框
                        const modal = document.getElementById("qrcode-modal");
                        const qrcodeContainer = document.getElementById("qrcode-container");
                        const pcode = data.pcode; // 获取订单号
                        console.log("订单号:", pcode);

                        // 插入二维码
                        qrcodeContainer.innerHTML = `<img src="data:image/png;base64,${data.qrCode}" alt="QR Code">`;

                        // 显示模态框
                        modal.style.display = "block";

                        // 启动轮询支付状态
                        paymentStatusInterval = setInterval(() => checkPaymentStatus(pcode), 10000); // 每3秒检查一次

                        // 关闭模态框的逻辑
                        const closeBtn = document.querySelector(".close");
                        closeBtn.addEventListener("click", function () {
                            if (!isPaid) {
                                const confirmLeave = confirm("订单未支付，确认离开吗？");
                                if (confirmLeave) {
                                    clearInterval(paymentStatusInterval); // 停止轮询
                                    modal.style.display = "none"; // 关闭模态框
                                    window.location.href = "/index.html"; // 跳转到首页
                                }
                            } else {
                                clearInterval(paymentStatusInterval); // 停止轮询
                                modal.style.display = "none"; // 关闭模态框
                            }
                        });

                        // 点击模态框外部关闭
                        window.addEventListener("click", function (event) {
                            if (event.target === modal) {
                                if (!isPaid) {
                                    const confirmLeave = confirm("订单未支付，确认离开吗？");
                                    if (confirmLeave) {
                                        clearInterval(paymentStatusInterval); // 停止轮询
                                        modal.style.display = "none"; // 关闭模态框
                                        window.location.href = "/index.html"; // 跳转到首页
                                    }
                                } else {
                                    clearInterval(paymentStatusInterval); // 停止轮询
                                    modal.style.display = "none"; // 关闭模态框
                                }
                            }
                        });
                    } else {
                        alert("下单失败：" + data.message);
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("下单失败，请重试！");
                });
        });

        // 检查支付状态的函数
        function checkPaymentStatus(pcode) {
            fetch("/api/orders/check-payment-status", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ code: pcode }) // 传递订单号
            })
                .then(response => response.json())
                .then(data => {
                    console.log("支付状态检查结果:", data); // 调试用
                    if (data.code === 0 && data.paid === 1) {
                        isPaid = true; // 标记为已支付
                        clearInterval(paymentStatusInterval); // 停止轮询
                        window.location.href = "/user.html"; // 跳转到用户页面
                    }
                })
                .catch(error => {
                    console.error("Error checking payment status:", error);
                });
        }
    });

</script>








<!--============================feature section start here =======================-->
<div class="feature-section bg-img py-60" style="background-image: url(../static/assets/picture/feature-img.png);">
    <div class="container">
        <div class="row gy-4">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ==========================feature setion end here ============================-->



<!-- ========footer===== -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="product-two-details.html" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  

<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

</body>
</html>
